{% extends "base.html" %}
{% from "macro.html" import tool_bread, toast with context %}
{% block title %}
    代码在线格式化工具
{% endblock %}
{% block content %}
    <main>
        <div class="container">
            {{ tool_bread("代码在线格式化", "CodeFormat") }}
            <div class="blog-content-brief-div p-3 mt-2">
                <label>语言选择:
                    <select id="language" class="form-control">
                        <option>JSON</option>
                        <option>HTML</option>
                        <option>Python</option>
                    </select>
                </label>
                <label>缩进:
                    <select id="indent" class="form-control">
                        <option value="2">2个空格</option>
                        <option value="4">4个空格</option>
                    </select>
                </label>
                <label>网络接口:
                    <div class="input-group">
                        <input type="text" class="form-control" name="interface" id="interface" placeholder="请输入接口地址" aria-required="true" aria-describedby="captcha" required>
                        <div class="input-group-append">
                            <button class="btn btn-sm btn-info" onclick="getInterfaceData()" id="sendCaptcha">获取数据</button>
                        </div>
                    </div>
                </label>
                <div class="row">
                    <div class="col-md-6">
                        <textarea id="originCode" class="code-format-textarea"></textarea>
                    </div>
                    <div class="col-md-6">
                        <textarea id="formatCode" class="code-format-textarea"></textarea>
                    </div>
                </div>
                {{ toast() }}
                <div class="d-flex">
                    <button class="btn btn-sm btn-outline-info mr-2" onclick="formatCode()">格式化</button>
                    <button class="btn btn-sm btn-outline-success mr-2" onclick="copyFormatCode()">复制格式化代码</button>
                    <button class="btn btn-sm btn-outline-danger mr-2" onclick="clearResult()">清空结果</button>
                </div>
            </div>
        </div>
    </main>
    <script>
        function formatCode(){
            let code = $("#originCode").val();
            let language = $("#language").val();
            let indent = $("#indent").val();
            $.ajax({
                url: '/tool/code-format/',
                type: 'post',
                data: {'indent': indent, 'language': language, 'code': code},
                success: function (res){
                    if (res.tag === 1){
                        $("#formatCode").empty();
                        $("#formatCode").val(res.code);
                        showToast('代码格式化成功!', 1500);
                    }else {
                        showToast(res.info, 1500);
                    }
                }
            })
        }

        function copyFormatCode(){
            let e = document.getElementById("formatCode");
            e.select();
            document.execCommand("Copy");
            showToast('格式化代码已复制到剪贴板!', 1000);
        }

        function clearResult(){
            $("#originCode").val('');
            $("#formatCode").val('');
        }

        function getInterfaceData(){
            let itf = $("#interface").val();
            if (itf === ''){
                showToast('接口地址不能为空!', 1500);
                return false;
            }
            $.ajax({
                url: '/tool/get-itf-data/',
                type: 'post',
                data: {'itf': itf},
                success: function (res){
                    if (res.tag === 1){
                        $("#originCode").val('');
                        $("#originCode").val(res.code.toString());
                        showToast('获取接口数据成功!', 1500);
                    }else
                        showToast(res.code, 1500);
                }
            })
        }
    </script>
{% endblock %}